<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<% String publishAreaId=request.getParameter("publishAreaId"); %>
	<head>
		<title>包受理渠道设置</title>
		<link rel="stylesheet" type="text/css"
			href="${pageContext.request.contextPath}/css/packagemgr.css">
		<link rel="stylesheet" type="text/css"
			href="${pageContext.request.contextPath}/css/themes/default/easyui.css">
		<link rel="stylesheet" type="text/css"
			href="${pageContext.request.contextPath}/css/themes/icon.css">
	</head>
		<style>
			.p_c_action_type {
				background-color:#EDF2F5;
				font-family:'新宋体';
				font-size:12px;
				line-height:20px;
				font-weight:noml;
				overflow:hidden;

			}
		</style>
	<body>
		<div id="publishEditBody" class="p_c_action_type">
			<div>
				<div id="channelQueryPack"></div>
				<div id="channelSelect"></div>
			</div>
			<div style="text-align: right; margin-right: 10px;">
				<input type="button" value="确定"
					onclick="javascript:channelConfirm();" />
				<input type="button" value="取消"
					onclick="javascript:channelCancel();" />
			</div>
		</div>
		<script type="text/javascript">

	function loadChannelData() {

	var channelDisplay = $("#packageChannel").val();
	var publishchannelIds = $("#publishChannel").val();

	if (channelDisplay != null && channelDisplay != ''
			&& channelDisplay != undefined) {
		var a = JSON.parse(publishchannelIds);
		var d = channelDisplay.split(',');
		for ( var i = 0; i < a.length; i++) {
			$('#channelSelect').datagrid('appendRow', {
				channelId : a[i].channelId,
				name : a[i].name,
				endDt : a[i].endDt,
				startDt : a[i].startDt,
				areaName : a[i].areaName

			});

		};
		$('#channelSelect').datagrid('acceptChanges');

	}
}

$(function(){



				$("#channelQueryPack").datagrid({
					toolbar:[{
           				 text: '渠道名称:<input type="text" id="channelNameSelect"/>'
        			},
        			{
        				iconCls: 'icon-search',
        				handler: function(){
               				querychannel();
            			}
        			}],
        			fitColumns: true,
					nowrap:false,
					showFooter:true,
					striped:true,
					height:200,
					singleSelect:true,
					columns:[[
						{field:'channelId',title:'ID',width:150,align:'left'},
						{field:'name',title:'名称',width:220,align:'left'},
						{field:'areaName',title:'地区',width:100,align:'left'},
						{field:'startDt',title:'开始时间',width:110,align:'left'},
						{field:'endDt',title:'结束时间',width:110,align:'left'}
					]],
					onSelect:function(index, row){
						var flag = false; //标识选中的地区在不在选择列表中
						//首选验证是否已经存在于选择列表中
						var a = $('#channelSelect').datagrid('getRows');
						for(var i = 0; i < a.length; i++){
							if(row.channelId == a[i].channelId){
								flag = true;
								$('#channelQueryPack').datagrid('unselectRow', index);
								$.messager.alert('提示信息','该地区已经存在于选择列表中!','info');
								break;
							}
						}
						//第一关通过之后再验证是否已经存在于之前的选择结果中
						if(!flag){
							var hasChannel = $("#publishChannel").val();
							if(hasChannel != ''){
								var hasChannelJSON=JSON.parse(hasChannel);
								for(var i = 0; i < hasChannelJSON.length; i++){
									if(hasChannelJSON[i].channelId == row.channelId){
										flag = true;
										$('#channelQueryPack').datagrid('unselectRow', index);
										$.messager.alert('提示信息','该渠道已经被选择!','info');
										break;
									}
								}
							}
						}

						//完全过关之后将选中结果加入到选择列表中
						if(!flag){
							$('#channelSelect').datagrid('appendRow',{
								channelId:row.channelId,
								name:row.name,
								startDt:row.startDt,
								endDt:row.endDt,
								areaName:row.areaName,
							});
							$('#channelSelect').datagrid('acceptChanges');
						}
					},
					pagination:true
				});
				var p = $('#channelQueryPack').datagrid('getPager');
				$(p).pagination({
					pageSize: 10,//每页显示的记录条数，默认为10
					pageList: [10,15],//可以设置每页记录条数的列表
				 	beforePageText: '第',//页数文本框前显示的汉字
				   	afterPageText: '页    共 {pages} 页',
				   	displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录'
				});

				$("#channelSelect").datagrid({
					title:'选择结果',
					fitColumns: true,
					nowrap:false,
					showFooter:true,
					striped:true,
					async:false,
					height:200,
					singleSelect:true,
					columns:[[
						{field:'channelId',title:'ID',width:150,align:'left'},
						{field:'name',title:'名称',width:220,align:'left'},
						{field:'areaName',title:'地区',width:100,align:'left'},
						{field:'startDt',title:'开始时间',width:110,align:'left'},
						{field:'endDt',title:'结束时间',width:110,align:'left'},
						{field:'operate', title:'操作', width:80,align:'left',
							formatter:function(value,row,index){
								var s = '<input type="button" value="删除" onclick="del(' + row.channelId + ')"/>';
								return s;
							}
					}]]	,
					onLoadSuccess:function(){

					}
				});

	loadChannelData();

			});

			function querychannel(){
				var name = $("#channelNameSelect").val();
				var params = {};
				params.name = encodeURIComponent(name);
				params.publishAreaId = packageAreaId;
				$('#channelQueryPack').datagrid({url:'../json/getChannelByName.action',
					queryParams:params});

				var p = $('#channelQueryPack').datagrid('getPager');

				$(p).pagination({
					pageSize: 10,//每页显示的记录条数，默认为10
					pageList: [10,15],//可以设置每页记录条数的列表
				 	beforePageText: '第',//页数文本框前显示的汉字
				   	afterPageText: '页    共 {pages} 页',
				   	displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录'
				});
			}

			function del(channelId){
				var a = $('#channelSelect').datagrid('getRows');
				for(var i = 0; i < a.length; i++){
					if(a[i].channelId == channelId){
						var index = $('#channelSelect').datagrid('getRowIndex', a[i]);
						$('#channelSelect').datagrid('deleteRow', index);
					}
				}
			}

			function channelConfirm(){

				$("#publishChannel").val(null);
				$("#packageChannel").val(null);
				//拼装地区名称展示
				var channelNames = '';
				//拼装地区Id
				var channelIds = '';
				var publishchannelIds = $("#publishChannel").val();
				var publishchannelJSON = new Array();
				if(publishchannelIds != '' && publishchannelIds != undefined){
					publishchannelJSON=JSON.parse(publishchannelIds);
				}
				var a = $('#channelSelect').datagrid('getRows');
				for(var i = 0; i < a.length; i++){
					channelIds += a[i].channelId;
					publishchannelJSON.push(a[i]);
					channelNames += a[i].name;
					if(i != (a.length-1)){
						channelIds += ',';
						channelNames += ',';
					}
				}

				$("#packageChannel").attr('value', channelNames);
				$("#publishChannel").attr("value",  JSON.stringify(publishchannelJSON));
				$("#channelEdit").window('close');
			}
			function channelCancel(){
				$("#channelEdit").window('close');
			}



		</script>
	</body>
</html>
